<template>
  <div class='container'>
    <el-card class="box-card">
      <el-form :inline="true" :model="title" ref="title" class="demo-form-inline">
        <el-form-item label="关键字" prop="id">
          <el-input v-model="title.id" placeholder="根据编号搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('title')" size='small'>清除</el-button>
          <el-button class="search" type="primary" @click="onSubmit" size='small'>搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共有${counts}条`" type="info" show-icon :closable="false">
      </el-alert>
      <el-table :data="items" style="width: 100%">
        <el-table-column prop="id" label="编号" width="200">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="160">
          <template v-slot='slotProps'>
            <div v-if='slotProps.row.questionType==="1"'>单选</div>
            <div v-else-if='slotProps.row.questionType==="2"'>多选</div>
            <div v-else-if='slotProps.row.questionType==="3"'>简答</div>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="200">
          <template v-slot='slotProps'>
            <el-button type="text" @click="dialogVisible = true">
              <div v-for="(item,index) in slotProps.row.questionIDs" :key="item.number">
                <a v-if='slotProps.row.questionIDs[index]' @click.prevent='detail(slotProps.row.questionIDs[index])' href="">{{slotProps.row.questionIDs[index].number}}</a>
              </div>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="160">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="170">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="170">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="150">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot='slotProps'>
            <el-button @click=removeRandoms(slotProps.row) type="danger" plain icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @current-change="handleCurrentChange" background :total='counts' :current-page.sync="page" :page-size="pagesize" layout="prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <div>
        <el-row>
          <div class="first">
            <el-col :span="6">
              <span>【题型】:
                <span v-if='this.list.questionType==="1"'>单选题</span>
                <span v-else-if='this.list.questionType==="2"'>多选题</span>
                <span v-else-if='this.list.questionType==="3"'>简答题</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span>【编号】: {{this.list.id}}</span>
            </el-col>
            <el-col :span="6">
              <span>【难度】:
                <span v-if='this.list.difficulty==="1"'>简单</span>
                <span v-else-if='this.list.difficulty==="2"'>一般</span>
                <span v-else-if='this.list.difficulty==="3"'>困难</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span>【标签】: {{this.list.tags}}</span>
            </el-col>
          </div>
          <el-col :span="6">
            <span>【学科】:
              <span v-if='this.list.subjectID===1'>java</span>
              <span v-else-if='this.list.subjectID===4'>前端</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【目录】:
              <span v-if='this.list.catalogID===1'>java基础</span>
              <span v-else-if='this.list.catalogID===2'>js基础</span>
              <span v-else-if='this.list.catalogID===5'>Vue基础</span>
              <span v-else-if='this.list.catalogID===6'>JavaWEB</span>
              <span v-else-if='this.list.catalogID===7'>css基础</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span>【方向】: {{this.list.direction}}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>【题干】:</div>
        <p v-html="list.question"></p>
        <div v-if='this.list.questionType==="1"'>
          <div>单选题 选项: (以下选中的选项为正确答案)</div>
          <el-radio-group v-model="flag">
            <div class="danxuan" v-for="(item, index) in list.options" :key="item.id">
              <el-radio :label=list.options[index].isRight>{{list.options[index].title}}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <div v-else-if='this.list.questionType==="2"'>
          <div>多选题 选项: (以下选中的选项为正确答案)</div>
          <el-checkbox-group v-model="checked">
            <div class="duoxuan" v-for=" (item, index) in list.options" :key="item.id">
              <el-checkbox :label=list.options[index].isRight>{{list.options[index].title}}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
        <div v-else-if='this.list.questionType==="3"'></div>
        <el-divider></el-divider>
        <div>【参考答案】:
          <el-button @click="answer" type="danger">
            视频答案预览
          </el-button>
        </div>
        <video v-if="video" :src="this.list.videoURL" controls="controls" muted="muted" loop="loop"></video>
        <el-divider></el-divider>
        【答案解析】: <span v-html="list.answer"></span>
        <el-divider></el-divider>
        <div>【题目备注】: {{this.list.remarks}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  name: 'randoms',
  data () {
    return {
      // 视频
      video: false,
      // 多选
      checked: [1],
      // 开关
      flag: 1,
      // 总记录数
      counts: 0,
      // 列表
      items: [],
      // 页面大小
      pagesize: 0,
      // 当前页码
      page: 0,
      // 弹窗状态
      dialogVisible: false,
      // 题目
      title: {
        // 编号
        id: '',
        // 组题时间
        addTime: '',
        // 用户名
        userName: '',
        // 试题ID
        questionIDs: '',
        // 答题进度
        progressOfAnswer: '',
        // 正确率
        accuracyRate: '',
        // 答题总耗时秒
        totalSeconds: '',
        // 组题类型
        questionType: ''
      },
      // 题目预览
      list: {
        // 题型
        questionType: '',
        // 编号
        id: '',
        // 难度
        difficulty: '',
        // 标签
        tags: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 方向
        direction: '',
        // 题干
        question: '',
        // 参考答案
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 选项
        options: [{
          // 代码
          code: '',
          // 标题
          title: '',
          // 图片
          img: '',
          // 编号
          id: '',
          // 是否正确答案
          isRight: ''
        }]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.video = false
      this.dialogVisible = false
      done()
    },
    answer () {
      this.video = true
    },
    resetForm (title) {
      this.$refs[title].resetFields()
    },
    async detail (row) {
      try {
        const { number, ...a } = row
        const ret = await detail(a)
        this.list = ret.data
        // console.log(this.list)
        // console.log(ret)
      } catch (error) {
        this.$message.error('获取试题失败')
      }
    },
    titleInfo () {
      // console.log(123)
    },
    handleCurrentChange (page) {
      this.page = page
      // this.randoms()
    },
    onSubmit () {
      this.page = 1
      // console.log(this.title.id)
      this.randoms()
    },
    removeRandoms (item) {
      this.$confirm('此操作将永久删除该题组，是否继续？', '提示', {
        type: 'warning'
      }).then(async () => {
        await removeRandoms(item)
        const index = this.items.findIndex(img => {
          return img === item
        })
        this.items.splice(index, 1)
        this.counts--
      }).catch((e) => {
        if (e === 'cancel') {
          console.log('取消删除')
        } else {
          this.$message.error('删除组题失败')
        }
      })
    },
    async randoms () {
      try {
        const ret = await randoms(this.title)
        // console.log(ret)
        this.page = ret.data.page
        this.pagesize = ret.data.pagesize
        this.items = ret.data.items
        this.counts = ret.data.counts
      } catch (error) {
        this.$message.error('获取祖题列表失败')
      }
    }
  },
  created () {
    this.randoms()
  }
}
</script>

<style scoped lang="scss">
.container {
  .box-card {
    margin: 10px 10px 0px;
    ::v-deep .el-form-item--medium {
      margin-left: 20px;
      .el-button--default {
        position: absolute;
        top: 0;
        right: -900px;
      }
      .search {
        position: absolute;
        top: 0;
        right: -965px;
      }
    }
    .el-alert--info {
      margin-bottom: 20px;
    }
    .el-pagination {
      text-align: right;
    }
  }
  ::v-deep .first {
    margin-bottom: 40px;
  }
  .danxuan {
    margin-top: 10px;
  }
  .duoxuan {
    margin-top: 10px;
  }
  video {
    margin-top: 40px;
    width: 400px;
  }
}
</style>
